"use client"

import { Diamond, Handshake, Heart } from "lucide-react"
import { Card, CardContent, CardTitle } from "@/components/ui/card"
import { useLanguage } from "@/context/language-context"

export function ValuesSection() {
  const { dictionary } = useLanguage()

  const values = [
    {
      icon: Diamond,
      title: dictionary.value1Title,
      description: dictionary.value1Description,
    },
    {
      icon: Handshake,
      title: dictionary.value2Title,
      description: dictionary.value2Description,
    },
    {
      icon: Heart,
      title: dictionary.value3Title,
      description: dictionary.value3Description,
    },
  ]

  return (
    <section className="py-12 md:py-20 bg-white dark:bg-gray-800">
      <div className="container mx-auto px-4 md:px-6 text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-10 text-gray-900 dark:text-gray-50">
          {dictionary.whyChooseUsTitle}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {values.map((value, index) => (
            <Card key={index} className="p-6 flex flex-col items-center text-center shadow-md">
              <value.icon className="w-12 h-12 text-gray-700 dark:text-gray-300 mb-4" />
              <CardTitle className="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">
                {value.title}
              </CardTitle>
              <CardContent className="p-0 text-gray-600 dark:text-gray-400">{value.description}</CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
